<template>
	<div style="padding: 10px;width: 800px

	;">
		<!-- 功能区域-->
		<div style="margin:10px 0;">
			<el-button type="primary" size="small" @click="add">新增</el-button>
			<el-button type="primary" size="small">导入</el-button>
			<el-button type="primary" size="small">导出</el-button>
		</div>
		<!-- 搜索区域-->
		<div style="margin: 10px 0px;">
			<el-input v-model="search" placeholder="请输入昵称关键字" style="width: 20%" clearable></el-input>
			<el-button :plain="true" type="primary" style="margin-left: 5px;" size="small" @click="load">查询</el-button>
		</div>
		<div>
			<el-table :data="tableData" v-loading="loading" style="width: 100%" max-height="380px" stripe border>
				<el-table-column prop="id" label="ID" sortable/>
				<el-table-column prop="username" label="姓名" />
				<el-table-column prop="nickname" label="昵称" />
				<el-table-column prop="age" label="年龄" />
				<el-table-column prop="sex" label="性别" />
				<el-table-column prop="address" label="地址" />
				<el-table-column label="角色">
          <template #default="scope">
            <span v-if="scope.row.role===1">管理员</span>
            <span v-if="scope.row.role===2">普通用户</span>
          </template>
          </el-table-column>
				<el-table-column label="操作" width="245px">
					<template #default="scope">
            <el-button size="small" type="success" plain @click="showBooks(scope.row.bookList)">查看图书列表</el-button>
						<el-button size="small" plain @click="handleEdit(scope.row)">编辑</el-button>
						<el-popconfirm title="确认删除吗" @confirm="handleDelete(scope.row.id)">
							<template #reference>
								<el-button size="small" type="danger">删除</el-button>
							</template>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table>
			<div style="margin: 10px 0px;">
				<el-pagination
					v-model:currentPage="currentPage"
					:page-sizes="[5, 10, 20]"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total"
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
				></el-pagination>
			</div>
      <el-dialog v-model="bookVis" title="用户拥有的图书列表"  width="30%">
        <el-table :data="bookList" stripe border>
          <el-table-column prop="id" label="ID"></el-table-column>
          <el-table-column prop="name" label="名称"></el-table-column>
          <el-table-column prop="price" label="价格"></el-table-column>
        </el-table>

      </el-dialog>
			<el-dialog v-model="dialogVisible" title="添加信息" width="30%">
				<el-form :model="form" label-width="120px">
<!--					<el-form-item label="ID"><el-input v-model="form.id" style="width: 80%;"></el-input></el-form-item>-->
					<el-form-item label="姓名"><el-input v-model="form.username" style="width: 80%;"></el-input></el-form-item>
					<el-form-item label="昵称"><el-input v-model="form.nickname" style="width: 80%;"></el-input></el-form-item>
					<el-form-item label="年龄"><el-input v-model="form.age" style="width: 80%;"></el-input></el-form-item>
					<el-form-item label="性别">
						<el-radio v-model="form.sex" label="男">男</el-radio>
						<el-radio v-model="form.sex" label="女">女</el-radio>
						<el-radio v-model="form.sex" label="未知">未知</el-radio>
					</el-form-item>
					<el-form-item label="地址"><el-input v-model="form.address" style="width: 80%;"></el-input></el-form-item>
<!--					<el-form-item label="日期"><el-input v-model="form.date" style="width: 80%;"></el-input></el-form-item>-->
				</el-form>
				<template #footer>
					<span class="dialog-footer">
						<el-button @click="dialogVisible = false">取消</el-button>
						<el-button :plain="true" type="primary" @click="save">确认</el-button>
					</span>
				</template>
			</el-dialog>
		</div>
	</div>
</template>

<script>
import request from "@/utils/request";
import {ElMessage} from "element-plus";
export default {
	name: 'User',
	data() {
		return {
			form: {
      },
      loading:true,
			search: '',
			currentPage: 1, //当前页
			total: 0,
			pageSize: 10, //每页个数
			dialogVisible: false,
      bookVis:false,
			tableData: [],
      bookList:[],
      user:{}
		};
	},
	created() {
		this.load();
	},
	methods: {
    showBooks(books){
      this.bookList=books
      this.bookVis=true
    },
		load() {
      this.loading=true
			request
				.get("/user/search", {
					//get是查找
					params: {
						pageNum: this.currentPage,
						pageSize: this.pageSize,
						search: this.search
					}
				})
				.then(res => {
          this.loading=false
					//将后台数据传入前端界面
					console.log(res);
          this.tableData = res.data.records,
              this.total = res.data.total
				});
		},
		add() {
			//打开弹窗
			this.dialogVisible = true;
			this.form = {};
		},
		handleEdit(row) {
			this.form = JSON.parse(JSON.stringify(row));
			this.dialogVisible = true;
		},
		handleSizeChange(pageSize) {//改变当前每页的个数
			this.pageSize=pageSize;
			this.load();
		},
		handleCurrentChange(pageNum) {//改变当前页码触发
		this.currentPage=pageNum;
		this.load();
		},
		handleDelete(id) {
			console.log(id);
      request.delete("/user/"+id).then(res =>{
				if(res.code==='0'){
					ElMessage({
						type:'success',
						message:'删除成功',
            duration:2000,
					})
				}else{
          ElMessage({
						type:"error",
						message:'删除失败',
            duration:2000,
					})
				}
				this.load();
			})
		},
		save() {
			if (this.form.id) {
				// 更新
        request.put("/user/update", this.form).then(res => {
					//put是更新
					console.log(res);
					if (res.code === '0') {
            ElMessage({
							type: 'success',
              message:'更新成功',
							 center: true,
              duration:2000,
						});
					} else {
						ElMessage({
							type: 'warning',
              message:'更新失败',
							 center: true,
              duration:2000,
						});
					}
					this.load(); //刷新表格数据
					this.dialogVisible = false; //关闭弹窗
				});
			} else {
				// 新增
        request.post("/user/insert", this.form).then(res => {
					console.log(res);
					if (res.code === '0') {
						ElMessage({
							message: '新增成功',
							type: 'success',
							 center: true,
              duration:2000,
						});
					} else {
						ElMessage({
							message: 'error',
							type: 'warning',
							 center: true,
              duration:2000,
						});
					}
					this.load(); //刷新表格数据
					this.dialogVisible = false; //关闭弹窗
				});
			}
		}
	}
};
</script>

<style></style>
